<template>
  <div style="margin-bottom: 20px;">
    <el-dialog :title="dialog_main_title" append-to-body v-dialogDrag :visible.sync="edit_flag" :before-close="handleClose">
      <!--打印内容-->
      <div id="keyPreparePrint" ref="print2" style="padding: 20px 20px 20px 20px;">
        <!--标题-->
        <!--<div id="keyPreparePrint_head">-->
        <!--<div class="mb10 flex a-center">-->
        <!--<span class="f22 ta-c">中联物流(中国)有限公司</span>-->
        <!--</div>-->
        <!--<div class="mb10 flex a-center">-->
        <!--<span class="f16 ta-c">备料单</span>-->
        <!--</div>-->
        <!--<div class="pad-t-b10 bor-1-333 f14" style="border-bottom: none;">-->
        <!--<div class="flex a-between mb10">-->
        <!--<div class="ta-l flex-1">-->
        <!--<span>备料单号: </span><span>{{title_data.headId}}</span>-->
        <!--</div>-->
        <!--<div class="ta-l flex-1">-->
        <!--<span>调度指令: </span><span>{{title_data.ownerOrderNo}}</span>-->
        <!--</div>-->
        <!--<div class="ta-l flex-1">-->
        <!--<span>车牌号: </span><span>{{title_data.plateNumber}}</span>-->
        <!--</div>-->
        <!--</div>-->
        <!--<div class="flex a-between">-->
        <!--<div class="ta-l flex-1">-->
        <!--<span>装车道: </span><span>{{title_data.loadingArea}}</span>-->
        <!--</div>-->
        <!--<div class="ta-l flex-1">-->
        <!--<span>生成时间: </span><span>{{title_data.createData | parseTime('{y}-{m}-{d}') }}</span>-->
        <!--</div>-->
        <!--<div class="ta-l flex-1">-->
        <!--<span>移库司机: </span><span>{{title_data.driverName}}</span>-->
        <!--</div>-->
        <!--</div>-->
        <!--</div>-->
        <!--</div>-->
        <!--table列表-->
        <!--<el-table :data="table_data" id="keyPreparePrint" border class="keyPreparePrint"-->
        <!--style="font-size:14px;width:auto;font-weight:400;margin: 0 auto 10px auto;border: 1px solid #333;">-->
        <!--<el-table-column type="index" label="序号" width="56"></el-table-column>-->
        <!--<el-table-column prop="cusOrderNo" label="客户订单号" width="140"></el-table-column>-->
        <!--<el-table-column label="底盘号/车型描述" width="400">-->
        <!--<template slot-scope="scope">-->
        <!--{{scope.row.lotNo1}}——{{scope.row.materielName}}-->
        <!--</template>-->
        <!--</el-table-column>-->
        <!--<el-table-column prop="locationNo" label="库位" width="140"></el-table-column>-->
        <!--<el-table-column prop="materielId" label="车型分类" width="160"></el-table-column>-->
        <!--<el-table-column prop="destAddress" label="目的地" min-width="300"></el-table-column>-->
        <!--</el-table>-->
        <!--<table id="keyPreparePrint_table" class="mb20 f12" style="width: 100%;">-->
        <!--<tr class="pad-t-b7">-->
        <!--<th width="30px">序号</th>-->
        <!--<th width="120px">客户订单号</th>-->
        <!--<th width="260px">底盘号/车型描述</th>-->
        <!--<th width="100px">库位</th>-->
        <!--<th width="120px">车型分类</th>-->
        <!--<th>目的地</th>-->
        <!--</tr>-->
        <!--<tr v-if="table_data && table_data.length > 0" v-for="(item,index) in table_data" :key="index">-->
        <!--<td>{{index+1}}</td>-->
        <!--<td>{{item.cusOrderNo}}</td>-->
        <!--<td>{{item.lotNo1}}——<span v-if="item.materielName">{{item.materielName}}</span><span v-else>无</span> </td>-->
        <!--<td>{{item.locationNo}}</td>-->
        <!--<td>{{item.materielId}}</td>-->
        <!--<td>{{item.destLocationProvince + item.destLocationCity}}</td>-->
        <!--</tr>-->
        <!--<tr v-else  class="ta-c pad15">-->
        <!--<td colspan='6'>-->
        <!--暂无数据-->
        <!--</td>-->
        <!--</tr>-->
        <!--</table>-->
        <!--<div id="keyPreparePrint_foot" class="pad-l10 flex a-between" type="flex" style="margin-bottom: 4px;">-->
        <!--<div class="f16 ta-l flex-1">-->
        <!--<span>钥匙保管员: </span><span></span>-->
        <!--</div>-->
        <!--<div class="f16 ta-l flex-1">-->
        <!--<span>移车司机: </span><span></span>-->
        <!--</div>-->
        <!--<div class="f16 ta-l flex-1">-->
        <!--<span></span>-->
        <!--</div>-->
        <!--</div>-->
      </div>
      <el-row type="flex" justify="end">
        <el-button type="primary" @click="handleClose">取消</el-button>
        <el-button type="primary" @click="printClick">确认打印</el-button>
      </el-row>
      <div style="height:20px"></div>
    </el-dialog>
  </div>
</template>

<script type="text/javascript">
  import printJS from 'print-js'
  import * as outboundKeyPrepareAPI from '@/api/outbound/outboundKeyPrepare'
  export default {
    name: '',
    components: {
    },
    props: ['edit_flag', 'dialog_main_title', 'select_row', 'edit_params'],
    data() {
      return {
        title_data: {},
        table_data: []
      }
    },
    created() {
    },
    methods: {
      handleOpenConfig(data) {
        console.log('paymentApplyPrintSelectRow', this.select_row)
        console.log('edit_params', this.edit_params)
        // this.title_data = {}
        // this.table_data = []
        // this.title_data = this.select_row
        // this.title_data.createData = Date.now()
        // this.edit_params.prepareInfoList.forEach((item) => {
        //   this.table_data.push(item)
        // })
        // this.table_data = this.table_data.concat(this.edit_params)
        // console.log('title_data', this.title_data, 'table_data', this.table_data)
        // this.createdPrintViewFunc()
        // console.log('handleOpenConfig()-data', data)
        document.getElementById('keyPreparePrint').innerHTML = data
        this.printEnd()
      },
      printClick() {
        // 先执行 备料确认
        const now_arr = []
        this.select_row.forEach(item => now_arr.push(item.headId))
        const toParams = {
          headIds: now_arr.length > 1 ? now_arr.join(',') : now_arr[0]
        }
        outboundKeyPrepareAPI.confirmPrepare(toParams).then(result => {
          if (result.code === 0) {
            // this.$print(this.$refs.print2)
            const style = '@page { margin: 0;size: auto; } @media print {  } ' // 自定义样式
            printJS({
              printable: 'keyPreparePrint', // 要打印内容的id
              type: 'html',
              style: style,
              // documentTitle: '出库备料单明细',
              targetStyles: ['*'],
              // css: '../../../styles/common.scss;',
              scanStyles: false
            })
            this.$emit('edit-close', false)
          } else {
            this.$message({
              title: '错误提示',
              message: '备料失败，请重新打印',
              type: 'warning',
              duration: 2000
            })
          }
        }).catch(() => {
          this.$message({
            title: '错误提示',
            message: '备料失败，请重新打印',
            type: 'warning',
            duration: 2000
          })
        })
      },
      printEnd() {
        // 去掉页眉 页脚
        if (this.getExplorer() === 'IE') {
          this.pageSetupNull()
        }
      },
      getExplorer() {
        var explorer = window.navigator.userAgent
        // ie
        if (explorer.indexOf('MSIE') >= 0) {
          return 'IE'
        } else if (explorer.indexOf('Firefox') >= 0) {
          return 'Firefox'
        } else if (explorer.indexOf('Chrome') >= 0) {
          return 'Chrome'
        } else if (explorer.indexOf('Opera') >= 0) {
          return 'Opera'
        } else if (explorer.indexOf('Safari') >= 0) {
          return 'Safari'
        }
      },
      pageSetupNull() {
        var h_key_root, h_key_path, h_key_key
        h_key_root = 'HKEY_CURRENT_USER'
        h_key_path = '\\Software\\Microsoft\\Internet Explorer\\PageSetup\\'
        const ActiveXObject = window.ActiveXObject
        try {
          var RegWsh = new ActiveXObject('WScript.Shell')
          h_key_key = 'header'
          RegWsh.RegWrite(h_key_root + h_key_path + h_key_key, '')
          h_key_key = 'footer'
          RegWsh.RegWrite(h_key_root + h_key_path + h_key_key, '')
        } catch (e) {
          //
        }
      },
      handleClose() {
        this.$emit('edit-close', false)
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  /*表格*/
  table{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    border-collapse:collapse;
  }
  table>tbody>tr,table>tbody>tr>th,table>tbody>tr>td { border:1px solid #333 !important;}
  table>tbody>tr>td { padding:4px 2px !important;line-height: 20px;}
  /*.PageNext{page-break-after: always;page-break-before: auto;}*/
  /*页眉页脚*/
  @page {
    /*size: auto;  !* auto is the initial value *!*/
    margin: 0; /* this affects the margin in the printer settings */
  }
</style>
